<template>
  <div :class="['aside-basic', menuStyle === 1 ? 'aside-basic-vertical' : 'aside-basic-horizontal']">
    <!-- 信息模块 -->
    <div ref="userBasic" :class="['user-basic', isCollapse ? 'inactive' : 'active']" @click="collapse"></div>
    <!-- 菜单列表 -->
    <el-menu
      :class="['menu-basic', menuStyle === 1 ? 'menu-vertical' : 'menu-horizontal']"
      :mode="menuStyle === 1 ? 'vertical' : 'horizontal'"
      :collapse="isCollapse"
      :unique-opened="true"
      router
    >
      <template v-for="menu in menuList">
        <el-submenu :index="menu.path" :key="menu.path" v-if="menu.children" class="menu-item">
          <template slot="title">
            <i :class="['iconfont', menu.icon]"></i>
            <span slot="title">{{ menu.name }}</span>
          </template>
          <template v-for="child in menu.children">
            <el-menu-item :index="child.path" :key="child.path" @click="selectMenu(menu, child)" class="menu-item">
              <!-- i class=""></i -->
              <span>{{ child.name }}</span>
            </el-menu-item>
          </template>
        </el-submenu>
        <el-menu-item :index="menu.path" :key="menu.path" v-if="!menu.children" @click="selectMenu(menu)" class="menu-item">
          <i :class="['iconfont', menu.icon]"></i>
          <span slot="title">{{ menu.name }}</span>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'Menu',
  props: {
    menuList: Array
  },
  computed: mapState({
    menuStyle: state => state.global.menuStyle
  }),
  data () {
    return {
      isCollapse: false
    }
  },
  methods: {
    collapse () {
      if (this.menuStyle === 1) {
        this.isCollapse = !this.isCollapse
      }
    },
    selectMenu (parent, child) {
      let breadcrumbList = []
      breadcrumbList.push({
        name: parent.name,
        path: parent.path
      })
      if (child) {
        breadcrumbList.push({
          name: child.name,
          path: child.path
        })
      }
      this.$store.commit('back/initBreadcrumbList', breadcrumbList)
    }
  }
}
</script>

<style lang="less" scoped>
.aside-basic-vertical {
  display: flex;
  flex-flow: column nowrap;
  .user-basic {
    width: 100%;
  }
  .active {
    height: 200px !important;
  }
  .inactive {
    height: 60px !important;
  }
}
.aside-basic-horizontal {
  display: flex;
  flex-flow: row nowrap;
  .user-basic {
    width: 60px;
    height: 100%;
  }
}
.aside-basic {
  width: 100%;
  height: auto;
  overflow: hidden;
  .menu-vertical {}
  .menu-horizontal {
    text-align: center !important;
    .menu-item {
      width: 200px;
    }
  }
  .el-menu {
    border: 0;
    text-align: left;
  }
  .menu-vertical:not(.el-menu--collapse) {
    width: 240px;
    .el-submenu {
      width: 100%;
    }
  }
}
.iconfont {
  font-size: 18px;
  margin: 0 4px 0 0;
}
</style>
